<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store,no-cache"> 
    <meta name="Handheldfriendly" content="true">
    <!-- 微软的老式浏览器 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <!-- 显示窗口 宽度 是 客户端的 屏幕 宽度 （就是 满屏 ！），显示的文字和图形的初始比例 是 1.0 -->
    <link rel="stylesheet" href="css/layui.css" media="all">
    <link rel="stylesheet" href="css/layui.mobile.css">
    <link rel="stylesheet" type="text/css" href="css/style.css"><!-- 基本样式 -->
    <link rel="stylesheet" type="text/css" href="css/about.css"><!-- 基本样式 -->
    <script src="js/common.js"></script>
    <title>官方活动详情</title>
    <style>
        #img{
            margin-top:15px;
        }
        .baoming.ybm{
            background-color: #d1d1d1;
            color: #1d1d1d;
            border:none;
        }
      .layermchild .layermcont {
            padding: 30px 50px;
        }
      .layermbtn span:last-child {
          height: 40px;
          background-color: #f36662;
          border-radius: 0 0 0 3px;
          color: #fff;
      }.spinner{width:20px;height:20px;position:fixed;z-index:1002;top:50%;margin-top:-10px;left:50%;margin-left:-10px}.container1>div,.container2>div,.container3>div{width:6px;height:6px;background-color:#ff536a;border-radius:100%;position:absolute;-webkit-animation:bouncedelay 1.2s infinite ease-in-out;animation:bouncedelay 1.2s infinite ease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both}.spinner .spinner-container{position:absolute;width:100%;height:100%}.container2{-webkit-transform:rotateZ(45deg);transform:rotateZ(45deg)}.container3{-webkit-transform:rotateZ(90deg);transform:rotateZ(90deg)}.circle1{top:0;left:0}.circle2{top:0;right:0}.circle3{right:0;bottom:0}.circle4{left:0;bottom:0}.container2 .circle1{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.container3 .circle1{-webkit-animation-delay:-1.0s;animation-delay:-1.0s}.container1 .circle2{-webkit-animation-delay:-0.9s;animation-delay:-0.9s}.container2 .circle2{-webkit-animation-delay:-0.8s;animation-delay:-0.8s}.container3 .circle2{-webkit-animation-delay:-0.7s;animation-delay:-0.7s}.container1 .circle3{-webkit-animation-delay:-0.6s;animation-delay:-0.6s}.container2 .circle3{-webkit-animation-delay:-0.5s;animation-delay:-0.5s}.container3 .circle3{-webkit-animation-delay:-0.4s;animation-delay:-0.4s}.container1 .circle4{-webkit-animation-delay:-0.3s;animation-delay:-0.3s}.container2 .circle4{-webkit-animation-delay:-0.2s;animation-delay:-0.2s}.container3 .circle4{-webkit-animation-delay:-0.1s;animation-delay:-0.1s}@-webkit-keyframes bouncedelay{0%,80%,100%{-webkit-transform:scale(0.0)}40%{-webkit-transform:scale(1.0)}}@keyframes bouncedelay{0%,80%,100%{transform:scale(0.0);-webkit-transform:scale(0.0)}40%{transform:scale(1.0);-webkit-transform:scale(1.0)}}#loading .mask{position:fixed;width:100%;background-color:#fff;top:0;left:0;height:100%;z-index:1001}

    </style>
</head>
<body style="background-color: #fff">
<div id="loading">
    <div class="mask"></div>
    <div class="spinner">
        <div class="spinner-container container1">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
        <div class="spinner-container container2">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
        <div class="spinner-container container3">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
    </div>
</div>
        <iframe id="iframe" style="width: 100%;border: none;"></iframe>
        <input type="button" class="baoming "  id="bmbtn" onclick="bmbtn(this)" value="报名中" style="display:block;width: 100px;margin: 10px auto">
    <div class="Activity-comments" id="lylist">
        <!--<div class="comments">-->
            <!--<img src="./cssimg/girl.jpg">-->
            <!--<p>这个活动太棒了这个活动太棒了这个活动太棒了这个活动太棒了这个活动太棒了这个活动太棒了这个活动太棒了这个活动太棒了这个活动太棒了这个活动太棒了</p>-->
            <!--<span>2017-07-21</span>-->
        <!--</div>-->
    </div>
    <div class="commentsmain-w">
        <div>
            <img src="cssimg/girl.jpg" id="grtx">
            <input type="text" placeholder="在这里说点什么吧......" id="input" class="input">
            <input onclick="addly()" type="button" value="发送" class="fsbtn2">
        </div>
    </div>
<script src="js/jquery/jquery-2.2.4.min.js"></script>
<script src="js/jquery/layer.js"></script>
<script>
    $("#iframe").css("height",$(window).height());
    var pric=0;
    var urs=window.location.search;
    var strs=urs.substring(1);
    var silp=strs.split('&');
    var res={};
    for (var i=0;i<silp.length;i++){
        res[silp[i].split("=")[0]]=silp[i].split("=")[1];
    }
    console.log(res);
   $(function () {
       getinfo();
       getLy()
   });
    function bmbtn(obj) {
        var $this=$(obj);
        if($this.hasClass("ybm")){
            return false;
        }
        layer.open({
            content: "报名此活动需要支付"+pric+"元活动费用."
            ,btn: ['支付', '不要']
            ,yes: function(index){
                bm();
                layer.close(index);
            }
        });
    }
    //报名
    function bm() {

        $.ajax({
            type : "POST",
            url : getRequestUrl("/user/signup_activity"),
            dataType : 'json',
            async: true,
            data:{
                user_id:"1",
                activity_id:res.id
            },
            // contentType : "application/json",
            success : function(datas) {
                console.log(datas.response_params.result);
                if(datas.response_params.result==0){
                    layer.open({
                        content: "报名成功,不要爽约哦~",
                        time:1
                    });
                    $("#bmbtn").addClass("ybm").val("已报名")
                }
                //soll=true;
            },
            error : function(err) {
            	dealCPErrorResponse(err);
            }
        });
    }

    //获取活动详情
    function getinfo() {
        $.ajax({
            type : "GET",
            url : getRequestUrl("/activity/get"),
            dataType : 'json',
            async: true,
            data:{
                user_id:"1",
                activity_id:res.id
            },
            // contentType : "application/json",
            success : function(datas) {
                console.log(datas);
                $("#iframe").attr("src",res.url);
                var arr=datas.response_params.result[0];
                var time=new Date(parseInt(arr.start_time) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ').substring(0,10)
                if(datas.response_params.total_cnt==1){
                    pric=arr.cost;
                    $("#name").html(arr.name);
                    $("#date").html(time);
                    $("#img").attr('src',arr.logo_url);
                    $("#grtx").attr('src',localStorage.txurl);
                    $("#des").html(arr.content);
                    if(arr.activity_status=="2"){
                        $("#bmbtn").addClass("ybm").val("已结束");
                        return false
                    }
                    if(arr.user_activity_status==1){ //，0：未报名，1：已报名，2：已参加活动，3：被拒绝，4：爽约活动
                        $("#bmbtn").addClass("ybm").val("已报名")
                    }else if(arr.user_activity_status==2){
                        $("#bmbtn").addClass("ybm").val("已参加活动")
                    }else if(arr.user_activity_status==3){
                        $("#bmbtn").addClass("ybm").val("被拒绝")
                    }if(arr.user_activity_status==4){
                        $("#bmbtn").addClass("ybm").val("爽约活动")
                    }
                    $("#loading").hide();
                }else {
                    alert("网络错误");
                }
            },
            error : function(err) {
            	dealCPErrorResponse(err);
            }
        });
    }

    function addly() {
        if($("#input").val()==""){
           return false
        }
        $.ajax({
            type : "POST",
            url : getRequestUrl("/activity/add_comment"),
            dataType : 'json',
            async: true,
            data:{
                user_id:"1",
                activity_id:res.id,
                content:$("#input").val()
            },
            success : function(datas) {
                console.log(datas.response_params.result);
                if(datas.response_params.result==0){
                    layer.open({
                        content: "留言成功~",
                        time:1
                    });
                    var time=Date.parse(new Date())/1000;
                    var time2=new Date(parseInt(time)*1000).toLocaleString().replace(/:\d{1,2}$/,' ').substring(0,10);
                    var strs=` <div class="comments">
                                    <img src=`+localStorage.txurl+`>
                                    <p>`+$("#input").val()+`</p>
                                    <span>`+time2+`</span>
                                </div>`
                    $("#lylist").prepend(strs);
                    $("#input").val("");
                }
            },
            error : function(err) {
            	dealCPErrorResponse(err);
            }
        });
    }
    function getLy() {
        ///activity/get_comment
        $.ajax({
            type : "POST",
            url : getRequestUrl("/activity/get_comment"),
            dataType : 'json',
            async: true,
            data:{
                activity_id:res.id,
                timestamp:Date.parse(new Date())/1000,
                page_num:1,
                page_size:100
            },
            success : function(datas) {
                console.log(datas.response_params);
                var arr=datas.response_params.result;
                    var strs="";
                    $.each(arr,function (i,e) {
                        var time=new Date(parseInt(arr[i].insert_time)*1000).toLocaleString().replace(/:\d{1,2}$/,' ').substring(0,10);
                        strs+=` <div class="comments">
                                    <img src=`+arr[i].portiait+`>
                                    <p>`+arr[i].content+`</p>
                                    <span>`+time+`</span>
                                </div>`
                    })
                    $(strs).appendTo("#lylist");
            },
            error : function(err) {
            	dealCPErrorResponse(err);
            }
        });
    }
</script>
</body>
</html>